<template>
  <view class="container">
    <!-- 顶部标题和切换按钮 -->
    <view class="header">
      <text class="title">打卡青城山游玩攻略</text>
      <view class="tab-buttons">
        <button
            :class="['tab-button', {active: activeTab === 'before'}]"
            @click="switchTab('before')"
        >
          前山
        </button>
        <button
            :class="['tab-button', {active: activeTab === 'after'}]"
            @click="switchTab('after')"
        >
          后山
        </button>
      </view>
    </view>

    <!-- 主内容区域 -->
    <view class="content">
      <!-- 路线图展示 -->
      <image
          class="route-map"
          :src="activeTab === 'before' ? beforeMountainImage : afterMountainImage"
          mode="widthFix"
      />

      <!-- 推荐路线 -->
      <view class="route-section">
        <text class="section-title">推荐游玩路线</text>
        <view class="route-steps">
          <view class="step" v-for="(step, index) in currentRoutes" :key="index">
            <text class="step-number">{{index + 1}}.</text>
            <text class="step-text">{{step}}</text>
          </view>
        </view>
      </view>

      <!-- 拍照打卡点 -->
      <view class="photo-spots">
        <text class="section-title">拍照打卡位置</text>
        <view class="spot-grid">
          <view class="spot" v-for="(spot, index) in currentPhotoSpots" :key="index">
            <image class="spot-image" :src="spot.image" mode="aspectFill" />
            <text class="spot-name">{{spot.name}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'before',
      beforeMountainImage: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E9%9D%92%E5%9F%8E%E5%B1%B1%E5%89%8D%E5%B1%B1%E8%B7%AF%E7%BA%BF%E5%9B%BE.jpg',
      afterMountainImage: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E9%9D%92%E5%9F%8E%E5%B1%B1%E5%90%8E%E5%B1%B1%E8%B7%AF%E7%BA%BF%E5%9B%BE.jpg',
      beforeRoutes: [
        '雨亭---月城湖---步云廊---上清宫---老君阁---九倒拐---朝阳洞---天师洞--凝翠桥---天然图画山',
        '山门一天然阁--石笋堂---步虚廊---索道---上清宫---大赤天---东华殿---老君阁---原路返回',

      ],
      afterRoutes: [
        '泰安古镇---五龙沟---又一村---翠映湖---泰安古镇',
        '泰安古飞泉沟---自云古寨---白云索道下山---五龙沟---泰安古镇',
      ],
      beforePhotoSpots: [
        {name: '五洞天', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%89%8D%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E4%BA%94%E6%B4%9E%E5%A4%A9.png'},
        {name: '天师洞', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%89%8D%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E5%A4%A9%E5%B8%88%E6%B4%9E.png'},
        {name: '上清宫', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%89%8D%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E4%B8%8A%E6%B8%85%E5%AE%AB.png'},
        {name: '朝阳洞', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%89%8D%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E6%9C%9D%E9%98%B3%E6%B4%9E.png'},
        {name: '老君阁', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%89%8D%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E8%80%81%E5%90%9B%E9%98%81.png'},
        {name: '月城湖', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%89%8D%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E6%9C%88%E5%9F%8E%E8%83%A1.png'}
      ],
      afterPhotoSpots: [
        {name: '五龙沟', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%90%8E%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E4%BA%94%E9%BE%99%E6%B2%9F.png'},
        {name: '泰安古镇', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%90%8E%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E6%B3%B0%E5%AE%89%E5%8F%A4%E9%95%87.png'},
        {name: '白云寺', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%90%8E%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E7%99%BD%E4%BA%91%E5%AF%BA.png'},
        {name: '白云索道', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%90%8E%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E7%99%BD%E4%BA%91%E7%B4%A2%E9%81%93.png'},
        {name: '翠映湖', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%90%8E%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E7%BF%A0%E6%98%A0%E6%B9%96.png'},
          {name: '飞泉沟', image: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E8%B7%AF%E7%BA%BF%E9%80%89%E6%8B%A9/%E5%90%8E%E5%B1%B1%E6%89%93%E5%8D%A1%E7%82%B9/%E9%A3%9E%E6%B3%89%E6%B2%9F.png'},


      ]
    }
  },
  computed: {
    currentRoutes() {
      return this.activeTab === 'before' ? this.beforeRoutes : this.afterRoutes
    },
    currentPhotoSpots() {
      return this.activeTab === 'before' ? this.beforePhotoSpots : this.afterPhotoSpots
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #f5f9f2;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.header {
  padding: 30rpx;
  background: linear-gradient(to bottom, #4a90e2, #3a7bc8);
  border-radius: 0 0 30rpx 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);

  .title {
    display: block;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 30rpx;
    text-shadow: 1rpx 1rpx 3rpx rgba(0,0,0,0.3);
  }
}

.tab-buttons {
  display: flex;
  justify-content: center;
  gap: 30rpx;

  .tab-button {
    background-color: rgba(255,255,255,0.2);
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 12rpx 40rpx;
    font-size: 28rpx;
    transition: all 0.3s;

    &.active {
      background-color: white;
      color: #4a90e2;
      font-weight: bold;
    }
  }
}

.content {
  padding: 0 30rpx;
}

.route-map {
  width: 100%;
  border-radius: 20rpx;
  margin-top: 30rpx;
  box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.1);
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #4a90e2;
  margin: 40rpx 0 20rpx;
  padding-left: 20rpx;
  border-left: 8rpx solid #4a90e2;
}

.route-steps {
  background-color: white;
  border-radius: 16rpx;
  padding: 25rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);

  .step {
    display: flex;
    margin-bottom: 15rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .step-number {
      color: #4a90e2;
      font-weight: bold;
      margin-right: 15rpx;
    }

    .step-text {
      flex: 1;
      color: #333;
    }
  }
}

.photo-spots {
  .spot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .spot {
      background-color: white;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);

      .spot-image {
        width: 100%;

      }

      .spot-name {
        display: block;
        padding: 15rpx;
        font-size: 26rpx;
        color: #333;
        text-align: center;
      }
    }
  }
}
</style>
